<style>
  .reviewers-say{
    overflow: hidden;
    position: relative;
  }
  .select-wrapper{
    display: flex;
    align-items: center;
  }
  .select-item .item-wrapper{
    display: flex;
    align-items: center;
    min-width: 150px;
    text-align: center;
    border-radius: 30px;
    border: 0.5px solid #FFF;
    background: #151515;
    color: #fff;
    padding: 8px 16px;
    cursor: pointer;
  }
  .select-item .item-wrapper:not(:last-child){
    margin-right: 10px;
  }
  .select-language .item-wrapper{
    background: #fff;
    color: #000;
    border: 0.5px solid #323232;
  }
  .select-language ul:empty{
    opacity: 0;
  }
  .select-item svg{
    width: 10px;
    height: 10px;
  }
  .select-item ul{
    display: none;
    margin-top: 8px;
    position: absolute;
    z-index: 1;
    padding: 12px;
    min-width: 174px;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 4px 23px 0px rgba(88, 91, 94, 0.08);
  }
  .select-wrapper .selected ul{
    display: block;
  } 
  .select-item li{
    padding: 10px 16px;
    border-radius: 30px;
    font-size: 14px;
    line-height: 22px;
    color: #000;
    cursor: pointer;
  }
  .select-item li:hover{
    background: #F8F8F8;
  }
  .blocks_content {
    display: flex;
}
  .text-model {
    display: flex;
    align-items: flex-start;
    max-width: 350px;
    padding-top: 40px;
    padding-bottom: 60px;
}
.blocks_content .right-text {
    margin-left: 20px;
}
.right-text .name{
  font-size: 20px;
  font-weight: 700;
  line-height: 32px; 
}
.right-text .text_1{
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    color: #8D8D8D;
}
.right-text .richtext p{
  color: #000;
  font-size: 20px;
  line-height: 32px;
}
.right-text .html{
  display: flex;
  align-items: center;
}
.right-text .placement {
    color: #8D8D8D;
    font-size: 14px;
    line-height: 22px;
    padding-left: 10px;
}
.blocks_content .video-media{
  width: 100%;
  position: absolute;
  max-width: 808px;
  right: 0;
  top: 0;
}
.reviewers-say .title{
  max-width: 350px;
  text-align: left;
  margin-bottom: 20px;
}
.reviewers-say .wra{
  position: relative;
}
.blocks_content .avatar img{
  width: 80px;
  height: 80px;
  border-radius: 40px;
  border: 2px solid #B5EFDE;
}
.product__media iframe,
.product__media{
  border-radius: 8px;
}
.relative-wra {
    position: relative;
}

@media screen and (max-width: 1280px){
.blocks_content .video-media {
    max-width: 60%;
}  
}

  
@media screen and (max-width: 990px){
  .blocks_content .video-media {
    position: relative;
    max-width: 100%;
}
.reviewers-say .wra {
    padding-bottom: 40px;
}
.blocks_content {
    display: block;
}
.text-model{
  max-width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}
.blocks_content .avatar img{
  width: 50px;
  height: 50px;
}
.right-text .richtext p {
    font-size: 12px;
    line-height: 20px;
    margin: 10px 0;
}
.right-text .name {
    font-size: 16px;
    line-height: 24px;
}
.right-text .text_1 {
    font-size: 14px;
    line-height: 22px;
    padding-left: 10px;
}
.tenways-index .reviewers-say{
  margin: 40px auto;
}
.right-text .name{
  display: flex;
}
.item-wrapper .select{
  font-size: 16px;
}
.select-item .item-wrapper{
  padding: 8px 10px;
}
}
</style>


<div class="page-width wra">
  <div class="relative-wra">
    {% if section.settings.title != blank %}
    <h2 class="title left">
      {{ section.settings.title | escape }}
    </h2>
  {% endif %}
   <div class="select-wrapper">
     <div class="select-item select-model" data-index>
       <div class="item-wrapper"><span class="select">{{ section.settings.model | escape }}</span><span>{% render 'icon-caret' %}</span></div>
       <ul class="model" name="model"></ul>
     </div>
     <div class="select-item select-language">
      <div class="item-wrapper"><span class="select">{{ section.settings.language | escape }}</span><span>{% render 'icon-caret' %}</span></div>
      <ul class="language" name="language"></ul>
     </div>
   </div>

  <ul id="reviewers-wrapper">
    {% for block in section.blocks %}
      <li data-id="{{ block.settings.model }}" language="{{ block.settings.language }}">
        <div class="model">{{ block.settings.model | escape }}</div>
        <div class="language" data-model="{{ block.settings.model }}">{{ block.settings.language | escape }}</div>
        <div class="blocks_content">
          <div class="text-model">
            <div class="avatar"><img src="{{ block.settings.avatar }}" alt="{{ block.settings.avatar.alt }}"></div>
            <div class="right-text">
              <div class="name">{{ block.settings.name }}<div class="text_1">{{ block.settings.text_1 }}</div></div>            
              <div class="richtext">{{ block.settings.richtext }}</div>
              <div class="html">{{ block.settings.html }}</div>
              <div class="location">{{ block.settings.placement }}</div>
            </div>
          </div>
          <div class="video-media">
            <div class="product__media media" style="padding-bottom: 56.25%;">
              <iframe loading="lazy" src="https://www.youtube.com/embed/{{ block.settings.video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen></iframe>
           </div> 
          </div>
        </div>
      </li>
    {% endfor %}
  </ul>
  </div>
</div>


<script>let reviewerList = [];</script>
{%- for block in section.blocks -%}
  <script>
    reviewerList.push({
      model: `{{ block.settings.model | escape }}`,
      language: `{{ block.settings.language | escape }}`,
      avatar: `{{ block.settings.avatar | img_url: '550x' }}`,
      name: `{{ block.settings.name }}`,
      text_1: `{{ block.settings.text_1 }}`,
      richtext: `{{ block.settings.richtext }}`,
      html: `{{ block.settings.html }}`,
      placement: `{{ block.settings.placement }}`,
      video_url: `{{ block.settings.video_url.id }}`,
    })
  </script>
{%- endfor -%}

<script>
  let obj = [];
  let Languageobj = [];
  
  const LiArr = document.querySelectorAll('#reviewers-wrapper li');
  const Firstmodel = document.querySelector('.select-model .select').innerHTML;
  
  for (let i = 0; i < LiArr.length; i++) {
    const modelList = LiArr[i].querySelector('.model').innerHTML;
    if(obj.indexOf(modelList)=== -1){
      obj.push(modelList);
    }
  }
  const languageListNodes = document.querySelectorAll('.language');
  languageListNodes.forEach(language => {
    Languageobj.push({
      model: language.dataset['model'],
      name: language.innerHTML
    })
  });
  
  const model = Object.keys(obj).map((item) => `<li data-id="${obj[item]}" class="content-item" value="${obj[item]}">${obj[item]}</li>`);
  document.querySelector(`[name='model']`).innerHTML += model.join(``)
  
  function selectLanguageTemplate (selectModel){
    const languageList = [];
    const language = Languageobj.reduce((acc, item) => {
      if (item.model === selectModel) {
        languageList.push(item);
        acc.push(`<li data-id="${item.name}" data-model="${item.model}" class="content-item" value="${item.name}">${item.name}</li>`);
      }
      return acc;
    }, []);    
    document.querySelector(`[name='language']`).innerHTML = language.join(``);
    return languageList;
  }
  selectLanguageTemplate(Firstmodel);
</script> 

<script>
  let modelLi = document.getElementsByClassName('model')[0];
  let contentItem = modelLi.getElementsByClassName("content-item");
  let oUl = document.querySelector('#reviewers-wrapper');

  function renderPage(data) {
    oUl.innerHTML = "";
    data.forEach(function (ele, index) {
      oUl.innerHTML +='<li model="'+ ele.model +'" class="'+ ele.model +'" language="'+ ele.language +'"><div class="blocks_content"><div class="text-model"><div class="avatar"><img src="'+ ele.avatar +'" alt="tenways"></div><div class="right-text"><div class="name">'+ ele.name +'<div class="text_1">'+ ele.text_1 +'</div></div><div class="richtext">'+ ele.richtext +'</div><div class="html">'+ ele.html +'<div class="placement">'+ ele.placement +'</div></div></div></div><div class="video-media"><div class="product__media media" style="padding-bottom: 56.25%;"><iframe loading="lazy" src="https://www.youtube.com/embed/'+ ele.video_url +'?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></div></div></li>'
    });
  }
  renderPage(reviewerList); 
</script>




<script>
  $(window).ready(function() {
    function renderLanguageTemplate (language) {
      document.querySelector('.select-language .select').innerHTML = language;
    }
    
    $(".select-wrapper .select-item").each(function(){
      $(this).click(function(){
        $(this).toggleClass('selected').siblings().removeClass('selected');
      })
    });

    let state = {
      model: '{{ section.settings.model | escape }}',
      language: '{{ section.settings.language | escape }}',
    }

    renderPage( screenModel(reviewerList, state.model,state.language));


   let modelLi = $(".select-model li");
   let languageLi = $(".select-language li");
   const LiArr = document.querySelectorAll('#reviewers-wrapper li');
   for (let i = 0; i < modelLi.length; i++) {
       (function(j){
        modelLi[j].onclick = function(){
            let $text = $('.select-model.selected .select').text($(this).text());
            for (let i = 0; i < LiArr.length; i++) {
              state.model = modelLi[j].innerHTML;
              const languageList = selectLanguageTemplate(state.model);
              state.language = languageList[0].name;
              renderLanguageTemplate(state.language);
              renderPage(screenModel(reviewerList, state.model,state.language));
            } 
        }
    })(i)
  }

  


  for(let k=0; k < languageLi.length; k++ ){
      (function(t){
        $(".language").on('click', function (element) {
          if (element.target.tagName.toLocaleLowerCase() === 'li') {
            $('.select-language .select').text($(element.target).text());
            for(let k = 0; k < LiArr.length; k++){
              state.language = element.target.innerHTML;
              state.model = $('.select-model .select').text().replace(/^\s+|\s+$/g,"");
              renderPage(screenModel(reviewerList, state.model,state.language));
            }
          }
        })
      })(k)
    }




   function screenModel(data, model, language) {
    return data.filter(function (ele, index) {
      return model == ele.model && language == ele.language; 
    })
  }

  });
</script>


  {% schema %}
    {
      "name": "Reviewers say",
      "tag": "section",
      "class": "spaced-section reviewers-say",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "title"
        },
        {
          "type": "text",
          "id": "model",
          "default": "AGO T",
          "label": "Default Model"
        },
        {
          "type": "text",
          "id": "language",
          "default": "Dutch",
          "label": "Default language"
        }
      ],
      "blocks":[
      {
        "type": "block",
        "name": "block",
        "settings": [
        {
          "type": "text",
          "id": "model",
          "label": "Model"
        },
        {
          "type": "text",
          "id": "language",
          "label": "Language"
        },
        {
          "type": "image_picker",
          "id": "avatar",
          "label": "avatar"
        },
        {
          "type": "text",
          "id": "name",
          "label": "name"
        },
        {
          "type": "text",
          "id": "text_1",
          "label": "text_1"
        },
        {
          "type": "richtext",
          "id": "richtext",
          "label": "richtext"
        },
        {
          "type": "html",
          "id": "html",
          "label": "html"
        },
        {
          "type": "text",
          "id": "placement",
          "label": "location"
        },
        {
          "type": "video_url",
          "id": "video_url",
          "accept": [
            "youtube",
            "vimeo"
          ],
          "default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc",
          "label": "video_url",
          "info": "video_url"
        }
        ]
      }
      ],
      "presets": [
        {
          "name": "Reviewers say"
        }
      ]
    }
  {% endschema %}

